<script setup lang="ts" name="SystemRole">
import { getFloorList, getPageList } from '@/api/energyWatch/power'
import { Search, Refresh, Edit, Crop } from "@element-plus/icons-vue"
import type { FormInstance, ElTree } from 'element-plus'
// import { notify } from '@/utils/element'

// 编辑ref
const editRef = ref();

// 定义状态
const state = reactive({
  loading: false,
  page: {
    current: 1, // 当前页码
    size: 10, // 每页显示多少条
    total: 0, // 总记录数
  } as PageType,
  query: {
    name: ''
  } as SysRoleQuery,
  treeList: [] as EnergyPowerTree[],
  tableList: [] as SysRoleType[],
});

const { loading, page, query, treeList, tableList } = { ...toRefs(state) };

onMounted(() => {
  queryData()
  getFloorTree()
});

/**
 * 查询列表数据
 */
async function queryData() {
  try {
    state.loading = true;
    // 调用接口
    // const { current, size } = state.page;
    const { data } = await getPageList(state.query, state.page);
    //console.log('data', data); // {total: xx, records: []}
    state.tableList = []; // 清空
    nextTick(() => {
      // 总记录数
      state.page.total = data.total;
      // 列表数据
      state.tableList = data.records;
    });
  } catch (error) {
  } finally {
    state.loading = false;
  }
}

// 点击查询
function handleQuery() {
  // 将页码设置为第1页
  state.page.current = 1;
  queryData();
}

/** 
 * 重置查询 
 */
const queryFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 点击删除
// async function handleDelete(id: string) {
//   console.log('handleDelete', id);
//   try {
//     state.loading = true;
//     // await deleteById(id);
//     notify('删除成功！', { type: 'success' });
//     queryData();
//   } catch (error) {
//   } finally {
//     state.loading = false;
//   }
// }

// // 点击新增
// function handleAdd() {
//   // console.log('handleAdd');
//   editRef.value.open('add', '新增');
// }

// 点击修改
function handleEdit(row: SysRoleType) {
  // console.log('handleEdit', row);
  editRef.value.open('edit', '修改', row);
}

// 立即抄表
const permissionRef = ref();
function handleRead(role: SysRoleType) {
  // console.log('handlePermission', role);
  permissionRef.value.open(role);
}

/**
 * 楼层树结构
 */
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
async function getFloorTree() {
  try {
    state.loading = true
    const { data } = await getFloorList()
    console.log('getFloorTree', data);
    state.treeList = data.records
  } catch (error) {
  } finally {
    state.loading = false;
  }
}

/** 过滤树 */
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const defaultProps = {
  children: 'children',
  label: 'label',
}

interface Tree {
  [key: string]: any
}
const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

function handleNodeClick(data: any) {
  // console.log('选择项目', data);
  const floorId = data.id
  console.log('选择项目', floorId);
}
</script>

<template>
  <div class="page-aside-nav">
    <div class="tab-aside">
      <div class="tab-aside-header">
        <span>航顺项目</span>
      </div>
      <div class="tab-aside-search">
        <el-input v-model="filterText" placeholder="搜索关键字" />
      </div>
      <el-tree ref="treeRef" class="filter-tree" v-loading="loading" :data="treeList" :props="defaultProps"
        default-expand-all node-key="id" :filter-node-method="filterNode" @node-click="handleNodeClick">
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <SvgIcon :name="data.icons"></SvgIcon>
            {{ node.label }}
          </span>
        </template>
      </el-tree>
    </div>
    <div class="tab-container">
      <div class="tab-container-header">
        <div class="tab-container-header-search">
          <el-form inline :model="query">
            <el-form-item label="房号">
              <el-input v-model="query.name" maxlength="30" placeholder="请输入房号" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain :icon="Search" @click="handleQuery()">查询</el-button>
              <el-button type="primary" plain :icon="Refresh" @click="resetForm(queryFormRef)">重 置</el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
      <div class="tab-container-table">
        <el-table class="table-con" ref="tableListRef" v-loading="loading" :data="tableList" border stripe
          :header-cell-style="{ backgroundColor: '#f7f7f7' }">
          <el-table-column type="expand" width="60">
            <template #default="props">
              <div class="table-con-childtab">
                <el-table :data="props.row.family" border stripe :header-cell-style="{ backgroundColor: '#e7f0f7' }">
                  <el-table-column label="电表编号" width="120" prop="name" />
                  <el-table-column label="电表名称" prop="state" />
                  <el-table-column label="本月用电量" prop="city" />
                  <el-table-column label="今日用电量" prop="address" />
                  <el-table-column label="当前采集底度" prop="zip" />
                  <el-table-column label="采集时间" prop="zip" />
                  <el-table-column label="在线状态" prop="zip" />
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" type="selection" width="60" />
          <el-table-column align="center" prop="roomName" label="房号" />
          <el-table-column align="center" prop="currentMothElectricity" label="本月用电量" />
          <el-table-column align="center" prop="currentDayElectricity" label="今日用电量" />
          <el-table-column align="center" prop="CurrentCcollectionBaseline" label="当前采集底度" />
          <el-table-column align="center" prop="collectionTime" label="采集时间" />
          <el-table-column fixed="right" align="center" label="操作" width="260">
            <template #default="{ row }">
              <el-button @click.stop="handleEdit(row)" :icon="Edit" type="primary" link>编辑</el-button>
              <el-button @click.stop="handleRead(row)" :icon="Crop" type="warning" link>立即抄表</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :page="page" @pageChange="queryData"></Pagination>
      </div>
    </div>
  </div>
</template>

<style scoped land="scss">
.tab-container-header-search {
  :deep(.el-form-item) {
    margin-bottom: 0px !important;
  }
}
</style>